<template>
	<view class="box">
		<view v-if="!postcarnum">
			<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
		</view>
		<view class="search-box" v-else>
			<text>您好:{{carnum}}</text>
			<button @click="cleancar" style="margin-left: 30px;">重新输入</button>
		</view>
		<view class="car-box">
			<view class="input-car" v-if="!postcarnum">
				<image src="@/static/8541772_car_transport_icon.png"></image>
				<text>添加车牌缴费免排队、免找零</text>
				<button @click="btnInputCar">查询</button>
			</view>
			<scroll-view class="car-list" v-else>
				<view class="car-item">
					<view class="car-item-text">
						<text>已停:{{carMsg.park_times_string}}</text>
						<text>场地:{{carMsg.park_name}}</text>
					</view>
					<view style="margin:auto;">
						<view v-if="carMsg.price">
							<p style="text-align: center;font-size: 30px;">¥{{carMsg.price}}</p>
							<button @click="getALiJsApiPay">去缴费</button>
							<!-- <p style="text-align: center;margin-top: 30px;" >请尽快前往岗亭缴费</p> -->
						</view>
						<view v-else>
							<p style="text-align: center;margin-top: 30px;" >您无需缴费</p>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="phone">客服电话:19905738800</view>
	</view>
	
</template>

<script>
  export default {
	  data(){
		return{
			qrcodeId:"",
			park:{
				parkId:"",
				parkName:"",
				secret:"",
				carNum:""
			},
			carnumleth:0,
			postcarnum:false,
			carnum:'浙Z12345',
			defaultNum: '浙Z12345',
			carMsg:{},
			parkPrice:{}
		}  
	  },
    onLoad: function() {
		
    },
	created() {
		 // 模拟二维码扫描后获取到的 qrcodeId
		const scannedQrCodeId = "50";
		this.getQrCodeId(scannedQrCodeId);
		// 在创建实例时调用 getParkPrcie 方法，以打印出获取到的数据  this.getParkPrcie(); 
	},
	methods:{
		getALiJsApiPay(){
				  console.log("点击了")
				  this.$store.dispatch('getALiJsApiPay',this.parkPrice).then(res=>{
					  console.log(res.trade_no)
					  my.tradePay ({
					    // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
					    tradeNO: res.trade_no,
					    success: res => {
					      my.alert ({
					        content: JSON.stringify (res),
					      });
					    },
					    fail: error => {
					      console.error('调用 my.tradePay 失败: ', JSON.stringify(error).memo);
					    },
					  });
				  })
		},
		getQrCodeId(qrcodeId){
				  this.$modal.loading("查询中，请耐心等待...")
				  console.log(qrcodeId)
				  this.$store.dispatch('getQrCodeId',qrcodeId).then(res=>{
					  console.log(res.data)
					  this.park.parkId=res.data.parkId
					  this.park.parkName=res.data.parkName
					  this.park.secret=res.data.secret
					  this.carMsg.park_name=res.data.parkName
					  console.log("this.carMsg.park_name"+this.carMsg.park_name)
					  this.$modal.closeLoading()
				  }).catch((err) => {
		          console.log("查询失败" + err);
		    });
		},
		async getParkPrcie(){
				  this.park.carNum=this.carnum.split(" ")[0]
				  this.$store.dispatch('getParkPrcie',this.park).then(res=>{
					  console.log(res.data)
					  if(res.data.state==2){
						  uni.showToast({
						  	  title: '无停车记录',
						  	  icon: 'none', // 图标，可选值：none / success / loading
						  	  duration: 2000 // 显示时长，单位为毫秒
						  	});
							this.cleancar()
							this.parkPrice="0"
							this.carMsg.park_times_string="0分钟"
							this.carMsg.price=""
							this.postcarnum = true
					  }else{
						  this.parkPrice=res.data
						  this.carMsg.park_times_string=res.data.park_times_string
						  this.carMsg.price=res.data.price
						  this.postcarnum = true
					  }
				  }).catch((err) => {
		          console.log("查询失败" + err);
		    });
		},
		btnInputCar(qrcodeId){
			//if(!this.token) return uni.$showMsg('请先登录')
			this.carnumleth = this.carnum.split(" ").join("").length
			console.log(this.carnum)
			if(this.carnumleth !== 7 && this.carnumleth !==8 ) 
			return uni.showToast({
				  title: '车牌信息输入错误',
				  icon: 'none', // 图标，可选值：none / success / loading
				  duration: 2000 // 显示时长，单位为毫秒
				});
			this.getParkPrcie()
		},
		cleancar(){
			this.postcarnum = false
			this.carnum = ''
			this.carMsg = Object.assign({}, this.carMsg);
			this.carnumleth = 0
		},
		numberInputResult(e) {
			this.carnum = e
			console.log(this.carnum)
		},
		
		
		//付款流程
		async payOrder(){
			//1.创建订单
			
			//1.1组织订单的信息对象
			const orderInfo={
				
			}
			//1.2发起请求创建订单
			const{data:res} = 
			await uni.$http.post('https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create',orderInfo)
			
			if(res.meta.status !== 200) return uni.$showMsg('创建订单失败')
			
			//1.3得到服务器响应的"订单编号"
			const orderNumber = res.message.order_number
			//console.log(orderNumber)
			//2.订单预支付
			//2.1发起请求获取订单的支付信息
			const{data:res2} = await uni.$http.post('https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder',{order_number:orderNumber})
			//2.2预付订单生成失败
			if(res2.meta.status !== 200) return uni.$showMsg('预付订单生成失败')
			const payInfo = res2.message.pay
			//console.log(payInfo)
			//2.3得到订单支付相关必要参数
			//3.发起支付
			//3.1调用uni.requestPayment()发起支付
			const[err,succ] = await uni.requestPayment({orderInfo:JSON.stringify(payInfo)})
			//3.2未完成支付
			console.log(err)
			if(err) return uni.$showMsg('订单支付失败!')
			//3.3完成了支付，进一步查询支付结果
			const{data:res3} = await uni.$http.post('https://api-hmugo-web.itheima.net/api/public/v1/my/orders/chkOrder',{order_number:orderNumber})
			//3.4检测到了订单未支付
			if(res3.meta.status !== 200) return uni.$showMsg('订单未支付!!')
			//3.5检测到了订单支付完成
			uni.showToast({
				title:'订单已支付',
				icon:'success'
			})
		},
		 
	}
  }
</script>

<style lang="scss">
  page{
  		padding-top: 20px;
  	}
  .box{
	  margin: 10px;
  }
  .car-box{
  	margin-top: 45px;
  	height: 430rpx;
  	width: 100%;
  	display: flex;
  	justify-content: center;
	}
  	.input-car{
  		height: 100%;
  		width: 90%;
  		background-color: white;
  		border-radius: 15px;
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		flex-direction: column;
  		letter-spacing: 2px;
		image{
			width: 60px;
			height: 60px;
		}
		text{
			font-size: 13px;
			margin-top: 10px;
			text-align: center;
			color: gray;
		}
		button{
			color: #108ee9;
			font-size: 17px;
			margin-top: 10px;
			text-align: center;
			line-height: 40px;
			width: 160px;
			height: 40px;
			border: 1px solid #108ee9;
			border-radius: 90px;
			font-weight: bold;
		}
	}
  		
  	.car-list{
  		height: 100%;
  		width: 90%;
  		background-color: #ecf4ff;
  		border: 1px solid white;
  		border-radius: 15px;
  		.car-item{
  			height: 100%;
  			width: 100%;
  			background-color: white;
  			border-radius: 15px 15px 0 0;
  			display: flex;
  			align-items: center;
  			flex-direction: column;
  			.car-item-text{
				padding: 10px 0;
  				width:90%;
				height: 20px;
  				color: black;
  				display: flex;
  				justify-content: space-between;
  				font-size: 13px;
  			}
  			.paynum{
  				text-align: center;
  				font-size: 40px;
  				//font-weight: bold;
  			}
  			button{
  				margin-top: 10px;
  				width: 600rpx;
  				background-color: #108ee9;
  				color: white;
  				font-size: 18px;
  				border-radius: 18px;
  			}
  		}
  	}
	
  .search-box{
  	position: sticky;
  	top: 0;
  	z-index: 999;
  	display: flex;
  	align-items: center;
  	text{
  		margin-left: 10px;
  		font-weight: bold;
  		font-size: 20px;
  		letter-spacing: 3px;
  	}
  	button{
  		margin-left: 10px;
  		text-align: center;
  		line-height: 70rpx;
  		width: 200rpx;
  		font-size: 15px;
  		border: 1px solid #bfbfbf;
  		background-color: #f5f5f5;
  		border-radius: 45px;
  		height: 70rpx;
  		color: #bfbfbf;
  	}
  }
  .phone{
	  bottom: 10px;
	  text-align: center;
	  margin-top: 25px;
	  font-size: 15px;
  }
</style>
